#logs {
    height: calc(100svh - 4rem - 10rem - 4rem - 4px); // padding + height + border
    font-family: monospace;
    border: 1px solid var(--surface-border);
    overflow-y: scroll;
    overflow-x: hidden;

    @media (min-width: 768px) {
        height: calc(100vh - 4rem - 9rem - 4rem - 4px); // padding + height + border
    }

    > div {
        max-width: 100%;
        line-break: anywhere;
        font-family: 'Courier New', Courier, monospace;
    }
}

.is-expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: var(--surface-overlay);

    #logs {
        height: calc(100svh - 4rem - 2rem - 4rem - 4px); // padding + height + border

        @media (min-width: 768px) {
            height: calc(100vh - 4rem - 4rem - 4px); // padding + height + border
        }
    }
}

.ansi-red { color: var(--ansi-red); }
.ansi-green { color: var(--ansi-green); }
.ansi-yellow { color: var(--ansi-yellow); }
.ansi-blue { color: var(--ansi-blue); }
.ansi-magenta { color: var(--ansi-magenta); }
.ansi-cyan { color: var(--ansi-cyan); }
.ansi-white { color: var(--ansi-white); }
